<template lang="jade">
  navbar-view
    .left
      a.link(@click="back()")
        i.fa.fa-arrow-left
    //- .center {{$route.params.navbarTitle}}
    .center {{$route.path.slice(1) || 'main'}}
    .right
      a.link
        i.fa.fa-arrow-right
      a.link
        i.fa.fa-arrow-right
  .page-content
    router-view

</template>

<script>
  import navbarView from 'navbar.vue'
  import listsView from 'lists.vue'

  import componentsList from '../data/componentsList'

  console.log(listsView);

  var tpl = {
    components: {
      navbarView,
      listsView
    },
    props: {
      navbarTitle: {
        type: String,
        default: 'BirdieView231'
      }
    },
    // data() {
    //   return {
    //     navbarTitle: 'BirdieView'
    //   }
    // },
    methods: {
      back() {
        window.history.back()
        return
      },
      titleChange(title) {
        console.log(title);
        this.navbarTitle = title
      }
    }
  }

  export default tpl
</script>

<style lang="less">
  .page-content {
    margin-top: 50px;
  }
</style>
